<template>
    <div class="admin-dropdown">
        <div class="admin-notification">

            <div class="dropdown-tongzhi">
                <svg-icon icon="通知"></svg-icon>
                <Message />
            </div>

        </div>
        <div class="admin-backend" @click="toAdmin">
            <svg-icon icon="后台" style="margin-right: 8px;"></svg-icon>管理后台
        </div>
        <div class="admin-user">
            <el-dropdown>
                <span class="el-dropdown-link fs14">
                    <svg-icon icon="用户" style="margin-right: 8px;"></svg-icon>{{ userStore.$state.user.userName ?
                        userStore.$state.user.userName : 'test' }}
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in userDropdownList" @click="chooseItem(item)">
                            <svg-icon :icon="item.title" style="margin-right: 10px;"></svg-icon>
                            {{ item.title }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import Message from '../message/index.vue';
import { useAppStore } from '@/stores/modules/app';
const { setVisiable } = useAppStore()
const userStore = useUserStore();
const router = useRouter();

const userDropdownList = [
    { title: '修改密码' },
    { title: '退出系统' },
]



const logoutHandle = () => {
    ElMessageBox.confirm('确定要退出登录吗？', '退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true
                userStore
                    .logoutAction()
                    .then(() => {
                        ElMessage.success('退出登录成功')
                        router.replace('/login')
                    })
                    .finally(() => {
                        done()
                    })
            } else {
                done()
            }
        }
    })
};
const toAdmin = () => {
    window.location.href = 'http://' + location.host
}



const chooseItem = (item: any) => {


    if (item.title === '退出系统') {
        logoutHandle()
    }
    if (item.title == '修改密码') {
        setVisiable(true)
    }
}
</script>
<style lang="scss" scoped>
.admin-dropdown {
    width: 350px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .admin-backend {

        color: rgba(255, 255, 255, 1);
        line-height: 2;
        font-weight: bold;
        cursor: pointer;
    }

    .dropdown-tongzhi {
        cursor: pointer;
        color: rgba(255, 255, 255, 1) !important;
        display: flex;
        align-items: center;
    }
}

.el-dropdown {
    color: rgba(255, 255, 255, 1) !important;
    cursor: pointer;
    line-height: 38px;
    letter-spacing: 1px;
    border: none !important;

}

.el-dropdown-item {
    color: rgba(255, 255, 255, 1) !important;

    &:hover {
        border: none !important;
    }
}

.el-dropdown-menu {
    background-color: rgba(9, 25, 57, 0.8) !important;
    border: 1px solid #00487f !important;
    border: none !important;
}

:focus-visible {
    outline: none;
}

.el-popper[x-placement^=bottom] {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;

}

.el-dropdown-menu__item:not(:last-of-type) {
    border-bottom: 1px solid #00487f;
}

/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow {
    border: none;
}

.el-dropdown-menu__item:not(.is-disabled) {
    color: #FFFFFF;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: #091939;
    color: #FFFFFF;

}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border: none;
}
</style>
